<template>
    <div class="container">
        <div class="start0" hidden>
            <div class="btn start zt1">开始测试</div>
        </div>
        <!-- 1rem 16px-->
        <div class="dati">
            <div class="dati_top"></div>
            <div class="timu_box text1">
                <span>问题</span>
                <span>{{ questionList[currentQuestionIndex].qid }}</span>
            </div>
            <div class="q">Q</div>
            <div class="xuanxiang">
                <div class="item xx" v-for="(option, index) in questionList[currentQuestionIndex].options" :key="index"
                    :class="{ selected: selectedOptionIndex === index }"
                    @click="selectOption(index, option.value, option.type)">
                    {{ option.label }}
                </div>
            </div>
            <div class="btn zt1 next" @click="nextQuestion"
                :text="currentQuestionIndex === questionList.length - 1 ? '完成' : '下一题'">{{ currentQuestionIndex ===
                    questionList.length - 1 ? '完成' : '下一题' }}</div>
        </div>

    </div>
</template>

<script>
import { questionList, doQuestion, submitQuestion } from '../../api'

import { mapState } from 'vuex'
import { Toast } from 'mint-ui'
export default {
    name: "",
    computed: {
        ...mapState(['userInfo'])
    },
    data() {
        return {
            sno: this.$store.state.userInfo.sno,
            do: false,
            questionList: [
                {
                    qid: 105,
                    options: [
                        { label: "我很努力工作", value: "A" },
                        { label: "我不情緒化", value: "B" }
                    ]
                },
                {
                    qid: 76,
                    options: [
                        { label: "我是一個好的領導者", value: "D" },
                        { label: "我會把我的工作處理的有條理", value: "E" }
                    ]
                }
            ],
            currentQuestionIndex: 0, // 当前问题在问题列表中的索引
            selectedOptionIndex: -1, // 选中的选项在当前问题选项列表中的索引
            userAnswers: []
        }
    },
    created() {
        this.getQuestionList()
        this.getDoQuestion()
    },
    methods: {
        async getQuestionList() {
            let result = await questionList();
            if (result.statu === 0) {
                this.questionList = result.data
            }
            console.log('questionList', result)
        },
        async getDoQuestion() {
            let sno = this.sno
            let result = await doQuestion({ sno });
            if (result.statu === 0) {
                this.do = result.data
            }
            console.log('getDoQuestion', this.do)
        },

        selectOption(index, value, type) {
            this.selectedOptionIndex = index;
            this.userAnswers[this.currentQuestionIndex] = { qid: this.questionList[this.currentQuestionIndex].qid, value, type };
        },
        nextQuestion() {

            if (this.selectedOptionIndex !== -1) {
                // 判断当前是否为最后一道问题
                if (this.currentQuestionIndex < this.questionList.length - 1) {
                    this.currentQuestionIndex++;
                    this.selectedOptionIndex = -1;
                } else {
                    this.finish();
                }
            }
        },
        async finish() {
            console.log(this.sno, this.userAnswers)
            let data = {
                "sno": this.sno,
                "list": this.userAnswers
            }
            let result = await submitQuestion(data)
            if (result.statu === 0) {
                Toast({
                    message: result.msg,
                    duration: 1000,
                    position: 'bottom'
                });
            }
        }
    },
    components: {

    },

}

</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
.container {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color:#000;
    margin: 0;
    padding: 0;
}
.start0
    winth: 100vw
    height: 100vh
    background-size:100% 100%
    background:url('./1.jpg') center/cover no-repeat
    .btn 
        background:url('./btn_bg.png')
        background-size:100% 100%
    .start
        width: 7.66rem
        height: 2rem
        position: absolute
        bottom: 4rem
        left: 7.67rem
        font-size: 0.9rem
        line-height: 2rem
        text-align: center
        padding: 0 1.6rem 1rem 0.3rem
        box-sizing: border-box

.dati{ background:url('./3.jpg') center/cover no-repeat; background-size:100% 100%;
winth: 100vw; height: 100vh}
.dati_top{background:url('./3_top.png'); background-size:100% 100%; 
width:13rem; height:4.5rem; position:absolute; top:0; left:3.6rem; }
.timu_box{ width:21rem; height:auto; position:absolute; top:6rem; left:1.5rem; border:0.1rem solid #000; border-radius:0.8rem; padding:0.8rem 0.3rem 0.8rem 0.8rem; box-sizing:border-box; background:url('./3_timu.png');}
.text1{ font-family:textintro; font-size:1rem; line-height:1.5rem; color:#FFFFFF; text-shadow: -2px 2px 0.2rem #000,2px -2px 0.2rem #000,2px 2px 0.2rem #000,-2px -2px 0.2rem #000; text-align:center}
.q{ width:1.8rem; height:1.8rem;
     border-radius:50%; border:0.1rem solid #000;
      background-color:#f94a4a;-webkit-box-pack: 
      center;justify-content: center;-webkit-box-align: 
      center;align-items: center; color:#FFFFFF;display: -webkit-box; 
      position:absolute; top:5.2rem; left:1.1rem;  font-size:1.4rem; 
      box-sizing:border-box;}

.item {
    width:21.5rem; height:3rem;  box-sizing:border-box; 
    font-size:0.9rem; text-align:left; line-height:3rem;
    padding:0.1rem 0 0 0.6rem ; text-align:center;
}
.xx{ 
    background:url('./x.png'); background-size:100% 100%; color:#000000;
}

.selected{  background:url('./xon.png'); background-size:100% 100%; color:#fff;}

.xuanxiang {
    position:absolute; 
    top:30%;
    width:100%;
    height:16rem;
    margin:0 auto;
    // border:1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


.zt1{ font-family:btn;}
.btn{ background:url('./btn_bg.png'); background-size:100% 100%}
.next{ width:10rem; height:3rem; position:absolute; 
    bottom:6rem; left:7rem; font-size:1.0rem; 
    line-height:2.3rem; text-align:center; padding: 0.1rem 1.6rem 0.3rem 0.3rem; 
    box-sizing:border-box;}


</style>